<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <div :class="{ 'arrowTransform': !showCardNav, 'arrowTransformReturn': showCardNav}">
              <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
            </div>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <span style="display: inline-block;margin-bottom: 10px;">
                <span style="margin-right: 12px;">工程名称</span>
                <el-input v-model="tableParam.name" style="width: 240px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">施工单位</span>
                <el-input v-model="tableParam.roadwork" style="width: 240px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left:12px;" @click="init()">重 置</el-button>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div v-loading="tableLoading" class="card_info" :style="style">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark">
              <template v-for="(item, index2) in table">
                <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :min-width="item.width">
                  <template slot-scope="scope">
                    <div v-if="item.label == '经纬度坐标'">
                      <span>{{scope.row.longitude}},{{scope.row.latitude}}</span>
                      <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='HUOQU'))!==-1" class="table_link" :underline="false" @click="mapVisibleTypeFun(scope.row)">获取</el-link>
                    </div>
                    <div v-else-if="item.label == '工程名称'">
                      <span style="color: #008200;cursor: pointer;" @click="datails(scope.row)">{{ scope.row.name }}</span>
                    </div>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
          <div class="card_bottom">
            <div class="card_bottom_left">
              <div class="top_page_totle">总共{{ total }}条</div>
              <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="gettableData()"></el-pagination>
            </div>
            <div>
              <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 电子围栏 -->
    <el-dialog v-dialogDrag :visible.sync="mapVisible" width="80%" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">地图选点</span>
      <div style="padding-bottom: 20px;">
        <div class="amap-page-container">
          <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
          <el-amap vid="amapDemo" :zoom="zoom" :events="events" :center="mapCenter" class="amap-demo" style="height:550px;">
            <el-amap-marker :position="markers.position" :events="markers.events" :draggable="markers.draggable"></el-amap-marker>
            <el-amap-circle v-for="(circle,index) in circles" :key="index" :center="circle.center" :radius="circle.radius" :fill-opacity="circle.fillOpacity" :bubble="true"></el-amap-circle>
          </el-amap>
          <div class="toolbar">
            <div>
              电子围栏（米）
              <el-input v-model="formMap.distance" onkeypress='return( /\d/.test(String.fromCharCode(event.keyCode)))' @input="update_distanceFun0()" @blur="formMap.distance=$regExp.blurCheckNum(formMap.distance)"></el-input>
            </div>
            position: {{markers.position}}
            address: {{ address }}
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="mapVisible = false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="savepoint()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看工程 -->
    <el-dialog v-dialogDrag :visible.sync="show" width="1085px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">工程信息</span>
      <div class="dialoginfo show">
        <el-form :inline="true" label-width="110px">
          <div class="form-title">工程基本信息</div>
          <el-form-item prop="name">
            <span slot="label" style="color:#FF0000;">工程名称</span>
            <el-input v-model="fromDate.name" placeholder="请输入" disabled></el-input>
          </el-form-item>
          <el-form-item prop="place">
            <span slot="label" style="color:#FF0000;">地理位置</span>
            <el-input v-model="fromDate.place" placeholder="请输入" disabled></el-input>
          </el-form-item>
          <el-form-item prop="expectedAmount" label-width="160px">
            <span slot="label" style="color:#FF0000;">预估用砼量（方）</span>
            <el-input v-model="fromDate.expectedAmount" style="width: 176px;" placeholder="请输入" disabled></el-input>
          </el-form-item>
          <el-form-item prop="typeId">
            <span slot="label">工程性质</span>
            <el-input v-model="fromDate.type" placeholder="请输入" disabled></el-input>
          </el-form-item>
          <el-form-item prop="rateOfProgressId">
            <span slot="label">项目进度</span>
            <el-input v-model="fromDate.rateOfProgress" placeholder="请输入" disabled></el-input>
          </el-form-item>
          <el-form-item prop="startTime">
            <span slot="label">起供时间</span>
            <el-date-picker v-model="fromDate.startTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" disabled></el-date-picker>
          </el-form-item>
          <el-form-item prop="tubularColumn">
            <span slot="label">管柱（米）</span>
            <el-input v-model="fromDate.tubularColumn" placeholder="请输入" disabled></el-input>
          </el-form-item>
          <el-form-item prop="fabricated">
            <span slot="label">装配式</span>
            <el-input v-model="fromDate.fabricated" placeholder="请输入" disabled></el-input>
          </el-form-item>
          <el-form-item prop="fabricated">
            <span slot="label">现场情况</span>
            <el-input v-model="fromDate.currentSituation" placeholder="请输入" disabled></el-input>
          </el-form-item>
          <div>
            <el-form-item prop="roadwork">
              <span slot="label" style="color:#FF0000;">施工单位</span>
              <el-input v-model="fromDate.roadwork" placeholder="请输入" disabled></el-input>
            </el-form-item>
            <el-form-item prop="roadworklInkman">
              <span slot="label" style="color:#FF0000;">联系人</span>
              <el-input v-model="fromDate.roadworklInkman" placeholder="请输入" disabled></el-input>
            </el-form-item>
            <el-form-item prop="roadworkPhone">
              <span slot="label" style="color:#FF0000;">电话</span>
              <el-input v-model="fromDate.roadworkPhone" placeholder="请输入" disabled></el-input>
            </el-form-item>
            <el-form-item prop="constructionUnit">
              <span slot="label">建设单位</span>
              <el-input v-model="fromDate.constructionUnit" placeholder="请输入" disabled></el-input>
            </el-form-item>
            <el-form-item prop="cuLinkman">
              <span slot="label">联系人</span>
              <el-input v-model="fromDate.cuLinkman" placeholder="请输入" disabled></el-input>
            </el-form-item>
            <el-form-item prop="cuPhone">
              <span slot="label">电话</span>
              <el-input v-model="fromDate.cuPhone" placeholder="请输入" disabled></el-input>
            </el-form-item>
            <el-form-item prop="contractSigningUnit">
              <span slot="label">合同单位</span>
              <el-input v-model="fromDate.contractSigningUnit" placeholder="请输入" disabled></el-input>
            </el-form-item>
            <el-form-item prop="clientTypeId">
              <span slot="label">客户类型</span>
              <el-input v-model="fromDate.clientType" placeholder="请输入" disabled></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item prop="businessTypeId">
              <span slot="label" style="color:#FF0000;">业务类型</span>
              <el-input v-model="fromDate.businesName" placeholder="请输入" disabled></el-input>
            </el-form-item>
            <el-form-item prop="executePhase">
              <span slot="label" style="color:#FF0000;">执行阶段</span>
              <el-select v-model="fromDate.executePhase" placeholder="请选择" disabled>
                <el-option label="委托交底" :value="1"></el-option>
                <el-option label="评估" :value="2"></el-option>
                <el-option label="投标" :value="3"></el-option>
                <el-option label="合同交底" :value="4"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item prop="remark">
            <span slot="label">备注</span>
            <el-input v-model="fromDate.remark" style="width: 920px;" type="textarea" :rows="5" resize="none" placeholder="请输入" disabled></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="show=false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import mixin from "@/mixins/ICPSmixin.js";
import VueAMap from "vue-amap";
import {
  QueryOneByid,
} from "@/api/internetSales/chanceManagement.js";
VueAMap.initAMapApiLoader({
  key: "9b26a3f5167523be11d0f55fef1b0437",
  plugin: ["AMap.Geolocation", "AMap.Autocomplete", "AMap.PlaceSearch"],
  v: "1.4.4",
  uiVersion: "1.0.11",
});
import {
  queryPage,
  update_long_lat,
  update_distance,
} from "@/api/smart/schedul/a.js";
import { setTimeout } from 'timers';
export default {
  mixins: [mixin],
  data() {
    let _this = this;
    return {
      circles: [],
      fromDate: {},
      show: false,
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      /*表格数据*/
      table: [
        { label: "工程编码", width: "140", prop: "code", status: true },
        { label: "工程名称", width: "220", prop: "name", status: true },
        { label: "施工单位", width: "220", prop: "roadwork", status: true },
        {
          label: "联系人",
          width: "140",
          prop: "roadworklInkman",
          status: true,
        },
        {
          label: "联系电话",
          width: "140",
          prop: "roadworkPhone",
          status: true,
        },
        {
          label: "登记时间",
          width: "160",
          prop: "startTime",
          status: true,
        },
        { label: "负责人", width: "140", prop: "principal", status: true },
        {
          label: "地理位置",
          prop: "place",
          status: true,
        },
        {
          label: "经纬度坐标",
          width: "250",
          prop: "",
          status: true,
        },
        {
          label: "经纬度地址",
          width: "150",
          prop: "address",
          status: true,
        },
        { label: "电子围栏(米)", width: "140", prop: 'distance', status: true },
      ],
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex*/
      pagesType: 0,
      /*添加表单数据*/
      point: "",
      mapVisible: false,
      companylist: [],
      principalarr: [],
      /*公用数据*/
      id: "",
      list: [],
      /*地图*/
      zoom: 12,
      mapCenter: [104.065637, 30.657717],
      loaded: false,
      address: "逸都国际",
      events: {
        'click': (e) => {
          _this.markers.position = [e.lnglat.lng, e.lnglat.lat];
          _this.getaddress(_this.markers.position)
        }
      },
      markers: {
        position: [1, 1],
        events: {
          dragend: (e) => {
            console.log(e);
            axios.get(`https://restapi.amap.com/v3/geocode/regeo?key=cbab7aa5c0100211fd6e07e2de46f1f9&location=${e.lnglat.lng},${e.lnglat.lat}`).then((res) => {
              this.address = res.data.regeocode.formatted_address
            })
            _this.markers.position = [e.lnglat.lng, e.lnglat.lat];
            console.log(1, this.circles.length > 0);
            if (this.circles.length > 0) {
              this.circles[0].center = _this.markers.position
            }
          },
        },
        draggable: true,
      },
      searchOption: {
        city: "全国",
        citylimit: true,
      },
      mapVisibleK: "",
      formMap: {
        id: '',
        distance: ''
      },
    };
  },
  async created() { },
  mounted() {
    /*存储拷贝的原初始化fromDate数据*/
    this.tableParam = {
      ...this.tableParam,
      id: "",
      stationName: "",
      isAssess: "5",
    };
    this.gettableData();
  },
  methods: {
    datails(low) {
      QueryOneByid({ id: low.id }).then((res) => {
        this.fromDate = res.data;
        this.show = true;
      });
    },
    /**逆向编码*/
    getaddress(lnglat) {
      let _this = this
      AMap.plugin('AMap.Geocoder', function () {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: '全国'
        })
        geocoder.getAddress(lnglat, function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            _this.address = result.regeocode.formattedAddress
            // result为对应的地理位置详细信息
            if (_this.circles.length > 0) {
              _this.circles[0].center = _this.markers.position
            }
          }
        })
      })
    },
    mapVisibleTypeFun(e) {
      this.mapVisible = true;
      this.formMap.id = e.id
      this.formMap.distance = e.distance
      this.mapVisibleK = e.id;
      if (e.longitude) {
        this.mapCenter = [e.longitude, e.latitude];
        console.log(this.mapCenter);
      } else {
        setTimeout(() => {
          this.mapCenter = [104.065637, 30.657717]
        }, 10)
      }
      this.address = e.place;
      let obj = [
        {
          name: e.place,
          lng: e.longitude,
          lat: e.latitude,
        },
      ];
      console.log(e.distance);
      this.circles = [
        {
          center: [e.longitude, e.latitude],
          radius: e.distance,
          fillOpacity: 0.2,
        },
      ];
      this.onSearchResult(obj);
    },
    /*地图*/
    onSearchResult(pois) {
      let _this = this;
      if (pois.length > 0) {
        _this.address = pois[0].name;
        _this.markers.position = [pois[0].lng, pois[0].lat];
        _this.mapCenter = [pois[0].lng, pois[0].lat];
      }
    },
    savepoint() {
      console.log(0);
      if (this.markers.position.length == 0) {
        this.$message({
          message: "请选择经纬度坐标",
          type: "warning",
        });
        return;
      }
      this.mapVisible = false;
      let obj = {
        longitude: this.markers.position[0],
        latitude: this.markers.position[1],
        id: this.mapVisibleK,
        address: this.address
      };
      update_long_lat(obj).then((res) => {
        if (res.code == 1001) {
          this.update_distanceFun(this.formMap)
        }
      });
    },
    update_distanceFun0() {
      console.log(0);
      this.circles[0].radius = this.formMap.distance
    },
    update_distanceFun(e) {
      let obj = {
        distance: e.distance,
        id: e.id,
      };
      update_distance(obj).then((res) => {
        if (res.code == 1001) {
          this.gettableData();
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        }
      });
    },
    /*重置数据*/
    init() {
      this.tableParam.id = "";
      this.tableParam.name = "";
      this.tableParam.roadwork = "";
      this.tableParam.isAssess = "5";
      this.gettableData();
    },
    addline() {
      const data = {
        stationId: this.id,
        name: "",
        output: null,
        type: 1,
        list: [],
      };
      this.lineList.push(data);
    },
  },
};
</script>

<style lang="scss" scoped>
.search-box {
  position: absolute;
  top: 25px;
  left: 20px;
}
.toolbar {
  padding-top: 10px;
}
.amap-page-container {
  position: relative;
  height: 570px;
}
.table_link {
  margin-left: 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
}
.el-input,
.el-select,
.el-cascader {
  width: 200px;
}
.mapbutton {
  width: 300px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  color: #606266;
  padding: 0 15px;
  height: 36px;
  line-height: 36px;
}
.mapbutton:hover {
  border-color: $bg_color;
  cursor: pointer;
}
.amap-demo {
  height: 400px;
}
</style>
